document.addEventListener('DOMContentLoaded', function () {


    //模拟封装jQuery $
    function $key(getkeys) {
        return document.querySelector(getkeys);
    }


    // 提取日期相关函数
    date();
    function date() {
        var spa = document.querySelector(".dater");
        var timer = null;
        // 封装时间日期格式化
        function mydate() {
            var date = new Date();
            // 时间日期格式化 yyyy-mm-dd hh:mm:ss
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var data = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            // 补 0
            month = (month < 10) ? "0" + month : month;
            data = (data < 10) ? "0" + data : data;
            hours = (hours < 10) ? "0" + hours : hours;
            minutes = (minutes < 10) ? "0" + minutes : minutes;
            seconds = (seconds < 10) ? "0" + seconds : seconds;
            var res = `${year}年${month}月${data}日 ${hours}:${minutes}:${seconds}`;
            return res;
        }

        function automove() {
            spa.innerHTML = mydate();
        }
        // 自动走
        setInterval(automove, 1000);
    }


    //添加内容
    var dailytop = document.getElementsByClassName("daily-top")[0];
    dailytop.innerHTML = `
            <div class="Lines"></div>
            <p class="pencil">考勤记录</p>
            <input type="text" placeholder="请输入姓名" class="name4">
            <button class="search4">搜索</button>
            <input type="date" class="datetime">
    `
    var dailybott = document.getElementsByClassName("daily-bottom")[0];
    dailybott.innerHTML = `
        <table>
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>请假</th>
                  <th>标识</th>
                  <th>出差</th>
                  <th>工作</th>
                  <th>应出勤</th>
                  <th>实际出勤</th>
                </tr>
              </thead>
              <tbody class="zdz"></tbody>
              <tfoot>
                <tr>
                  <th colspan="7">
                    <button id="uper4">&lt;</button>
                    <button class="age4"></button>
                    <button id="nexter4">&gt;</button>
                  </th>
                </tr>
              </tfoot>
            </table>
    `


    //AJAX调接口
    var pageIndex = 1;
    var pageSize = 5;
    var pageCount = 10; //页面初始值
    function clockList() {
        $key(".zdz").innerHTML = " ";
        $key(".age4").innerHTML = " ";
        var ydf = {
            userId: Number(localStorage.getItem("userId")),
            pageIndex: pageIndex,
            pageSize: pageSize
        }
        ajax.post("http://192.168.199.101:8080/BaorSystem/count/coutList", ydf, function (res) {
            if (res.code == 200) {
                console.log(res);
                pageCount = res.dataset.pageCount;
                for (var i = 0; i < pageCount; i++) {
                    var btn = document.createElement("button");
                    btn.innerHTML = i + 1;
                    var age4 = document.getElementsByClassName("age4")[0];
                    age4.appendChild(btn);
                }
                for (var item of res.dataset) {
                    var newTr4 = document.createElement("tr");
                    newTr4.innerHTML = `
                        <td>${item.userName}</td>
                        <td>${item.vacationDay}</td>
                        <td>${item.userRole}</td>
                        <td>${item.businessDay}</td>
                        <td>${item.workDay}</td>
                        <td>${item.shouldDay}</td>
                        <td>${item.realDay}</td>
                    `;
                    $key(".zdz").appendChild(newTr4);
                }
            }
        })
    }
    clockList();
    pagination4()


    //分页
    function pagination4() {
        $key("#nexter4").onclick = function () {//下一页
            pageIndex++;
            if (pageIndex >= pageCount) {
                pageIndex = pageCount;
                this.disabled = true;
            }
            $key("#uper4").disabled = false;
            clockList();
        }
        $key("#uper4").onclick = function () {//上一页
            pageIndex--;
            if (pageIndex <= 1) {
                pageIndex = 1;
                this.disabled = true;
            }
            $key("#nexter4").disabled = false;
            clockList();
        }
    }


    //搜索框
    var search4 = document.getElementsByClassName("search4")[0];
    var name4 = document.getElementsByClassName("name4")[0];
    search4.onclick = function () {
        $key(".zdz").innerHTML = "";
        if (name4.value.trim() == "") {
            clockList();
        } else {
            searchup();
        }
    }
    function searchup() {
        $key(".zdz").innerHTML = "";
        var ydf = {
            userId: Number(name4.value),
        }
        ajax.post("http://192.168.199.101:8080/BaorSystem/count/coutList", ydf, function (res) {
            console.log(res);
            if (res.code == 200) {
                pageCount = res.dataset.pageCount;
                console.log(res);
                for (var item of res.dataset) {
                    console.log(item);//获取到每一项对象
                    // 创建元素
                    var newTr4 = document.createElement("tr");
                    newTr4.innerHTML = `
                            <td>${item.userName}</td>
                            <td>${item.vacationDay}</td>
                            <td>${item.userRole}</td>
                            <td>${item.businessDay}</td>
                            <td>${item.workDay}</td>
                            <td>${item.shouldDay}</td>
                            <td>${item.realDay}</td>
                        `;
                    $key(".zdz").appendChild(newTr4);
                }
            }
        })
    }


    //日期框默认显示
    var datetime = document.getElementsByClassName("datetime")[0];
    datetime.valueAsDate = new Date();


    //页面跳转

    //班级管理
    var classs = document.getElementsByClassName("classs");
    classs[0].onclick = function () {
        location.href = "./ClassManagement.html";
    }
    //日常
    var routine = document.getElementsByClassName("routine")[0];
    routine.onclick = function () {
        location.href = "./daily.html";
    }
    //项目管理
    var project = document.getElementsByClassName("project")[0];
    project.onclick = function () {
        location.href = "./projectmanagement.html";
    }
    //出差记录
    var travel = document.querySelector(".travel");
    travel.addEventListener('click', function () {
        location.href = "./business.html";
    });
    //请假记录
    var excused = document.querySelector(".excused");
    excused.addEventListener('click', function () {
        location.href = "./vacate.html";
    });
    //考勤记录
    var presence = document.querySelector(".presence");
    presence.addEventListener('click', function () {
        location.href = "./clock.html";
    });
    //系统设置
    var system = document.getElementsByClassName("system")[0];
    system.onclick = function () {
        location.href = "./setting.html";
    }
});